<template>
    <div>
      <searchBox @searchChange="searchChange" />
      <div class="gva-table-box">
        <div class="gva-btn-list"><el-text class="mx-1" size="large">{{burialDetail.name}} 数据统计</el-text></div>
        <el-card>
          <el-row style="margin:30px auto">
            <el-col :span="6" />
            <el-col :span="6">
              <el-statistic
                title="上报数据量"
                :value.number="reportCount"
              />
            </el-col>
  
            <el-col :span="6">
              <el-statistic
                title="累计用户数"
                :value="userCount"
              />
            </el-col>
            <el-col :span="6" />
          </el-row>
        </el-card>
      </div>
  
      <div class="gva-table-box">
      <lineChart
            ref="activeUser"
            :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"
          />
      </div>
      <div class="gva-table-box">
        <el-text
          class="mx-1"
          size="large"
        >详细数据</el-text>
        <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          row-key="ID"
          :data="tableData"
          border
        >
  
          <el-table-column
            align="left"
            label="日期"
            prop="date"
          />
          <el-table-column
            align="left"
            label="上报数据量"
            prop="report_count"
          />
          <el-table-column
            align="left"
            label="累计用户量"
            prop="user_count"
          />
          
        </el-table>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useTransition } from '@vueuse/core'
  import lineChart from '../../components/echarts/lineChart.vue'
  import searchBox from '../../components/search/searchBox.vue'
  import type { TabsPaneContext } from 'element-plus';
  import { sumByKey } from '../../utils/fmtData'
  import {
    getQmBurialDataList
  } from '@/api/qmBurialData'
  import {
  findQmBurial
} from '@/api/qmBurial'

  const route = useRoute()
  const searchInfo = ref({})
  const tableData = ref([])
  const burialDetail = ref({})
  

  onMounted(() =>{
    getBurialFunc()
  })

  var searchChange = function(date) {
    searchInfo.value = date
    getTableData()
    getUserTotal()

  }
  
  const getBurialFunc = async() => {
    const res = await findQmBurial({ ID: route.query.id })
    if (res.code == 0) {
      burialDetail.value = res.data.burial
    }
  }
  
  const userCount = ref(0)
  const getUserTotal = async() => {
    const res = await getQmBurialDataList({ flag: route.query.flag,type:1, ...searchInfo.value })
    if(res.code === 0){
      userCount.value = res.data.user_count
    }
  }
 

  const reportCount = ref(0)

  const chartData = ref({
  xAxis: [],
  series: [{
    name: '上报数据量',
    type: 'line',
    data: []
  },{
    name: '累计用户量',
    type: 'line',
    data: []
  }],
  legend: ['上报数据量','累计用户量'],
  title: '用户数据'
})
  const getTableData = async() => {
    const res = await getQmBurialDataList({ flag: route.query.flag,type:2, ...searchInfo.value })
    if(res.code === 0){
        chartData.value.xAxis = []
        chartData.value.series[0].data = []
        chartData.value.series[1].data = []
        chartData.value.xAxis = res.data.burial_data.map(item => item.date)
        chartData.value.series[0].data = res.data.burial_data.map(item => item.report_count)
        chartData.value.series[1].data = res.data.burial_data.map(item => item.user_count)
        tableData.value = sumByKey(res.data.burial_data,'date')
        userCount.value = res.data.user_count
        let count = 0
        res.data.burial_data.forEach(element=>{
          if(element.report_count)
            count += Number(element.report_count)
        })
        reportCount.value = count
    }
  }

  </script>
  <style>
  .el-col {
    text-align: center;
  }
  </style>
  